<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script type="text/javascript" src="static/js/fireworks.js"></script>

    <style type="text/css">
        body {
            background-image: url("static/img/login/DepictCQU.png");
            background-repeat: no-repeat;
            /*background-size: cover;*/
            background-size: 1200px 560px;
            opacity: 1;
            background-position: 50% -3%;
        }

        #wrap {
            height: 100%;
            width: 100%;
            position: relative;
        }

        #wrap .logPannel {
            height: 350px;
            width: 320px;
            position: absolute;
            background-color: rgba(219, 219, 219, 0.58);
            top: 100px;
            right: 15%;
            border-style: solid;
            border-radius: 10px; /* 圆角边框  */
            border-color: #d9d9d9;
            box-shadow: 3px -1px 10px #929292; /* 阴影  */
        }


        .logPannel .loginTitle {
            font-family: 隶书;
            font-weight: bolder;
            width: 83%;
            border-bottom: 2px solid #FFB800;
            margin: 10px 10% auto 8%;
            display: inline-block;
            font-size: 30px;
            text-align: center;
        }


        #wrap .logPannel .loginArea {
            width: 85%;
            position: relative;
            margin: 30px auto;
        }

        .logPannel .loginArea i {
            position: absolute;
            top: 12px;
            left: 8px;
            font-size: 22px;
        }

        .logPannel .loginArea input {
            width: 100%;
            height: 50px;
            border: none;
            text-indent: 2.5rem;
            border-radius: 30px;
        }

        #wrap .logPannel .loginBtn {
            width: 86%;
            margin: 0 auto;
            border-radius: 10px;
        }

        .loginBtn button {
            font-family: 隶书;
            width: 100%;
            height: 50px;
            background-color: #ee7700;
            border: none;
            color: white;
            font-size: 25px;
            border-radius: 30px;
        }

        #foot {
            width: 100%;
            height: 80px;
            position: fixed;
            bottom: 0;
        }

        .errorArea {
            font-family: 隶书;
            margin: auto auto 20px auto;
            color: red;
            font-size: 16px;
        }

        .copyright {
            font-family: myFont;
            font-size: 15px;
            font-weight: bold;
            color: #000000;
            position: absolute;
            bottom: 0;
            left: 48%;
            transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
            text-align: center;
        }

        @font-face {
            font-family: myFont;
            src: url("static/fonts/字体视界-小南同学.ttf")
        }
    </style>
</head>

<body>
<div class="wrap" id="wrap">
    <div class="logPannel">
        <!-- 头部提示信息 -->
        <div class="loginTitle">
            <p class="p1">登录</p>
        </div>

        <form id="form1" onsubmit="return false" action="#" style="text-align: center">
            <!-- 输入框 -->
            <div class="loginArea">
                <i class="layui-icon layui-icon-username"></i>
                <label>
                    <input type="text" name="name" placeholder="输入用户名"/>
                </label>
            </div>

            <div class="loginArea">
                <i class="layui-icon layui-icon-password"></i>
                <label>
                    <input type="password" name="password" placeholder="输入用户密码"/>
                </label>
            </div>

            <div class="errorArea">
                <label>密码或账户错误</label>
            </div>

            <div class="loginBtn">
                <button onclick="login()">登 录</button>
            </div>

        </form>
    </div>
</div>

<div id="foot">
    <div class="copyright">
        <span>联系邮箱：sevenGroup@test.com</span>
        <br>
        <span>联系电话：18355042634</span>
        <br>
        <span>copyright@sevenGroup</span>
        <br>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.errorArea').hide();
    })

    $('.loginArea').click(function () {
        $('.errorArea').hide();
    })

    function login() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/loginIn",//url
            data: $('#form1').serialize(),
            success: function (result) {
                if (result === false) {
                    $('.errorArea').show();
                } else {
                    layer.open({
                        type: 2,
                        area: ['290px', '250px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: 'slider',
                    });
                    // window.location.replace("index");
                }
            },
            error: function () {
                layer.msg("网络异常！请稍后再试")
            }
        });
    }

</script>

</body>
</html>





